<template>
  <el-row :gutter="20">
    <el-col :span="4">
      <div class="nav">
        <div class="nav-title">产品类型列表</div>
        <div class="treeProduct">
          <!-- <treeProduct @sendTreeData="sendTreeData"></treeProduct> -->
          <treeProduct  @getTreeData="getTreeData"></treeProduct>
        </div>
      </div>
    </el-col>
    <el-col :span="20">
      <div class="wrapper">
        <div class="wrapper-title">商品{{ title }}</div>

        <!-- 表单 -->
        <el-form :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm">
          <el-form-item label="所属分类" prop="category">
            <span>{{ ruleForm.category }}</span>
          </el-form-item>
          <el-form-item label="商品名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="num">
            <el-input v-model="ruleForm.num"></el-input>
          </el-form-item>
          <el-form-item label="商品卖点" prop="sellPoint">
            <el-input v-model="ruleForm.sellPoint"></el-input>
          </el-form-item>
          <el-form-item label="添加图片" prop="image">
            <!-- 添加图片 -->
            <uploadImg @sendImgUrl="sendImgUrl"></uploadImg>
          </el-form-item>
          <el-form-item label="商品描述" prop="descs">
            <!-- W编译器 -->
            <wangEditor @sendWangEditor="sendWangEditor"></wangEditor>
          </el-form-item>

          <el-form-item label="首页轮播推进" prop="isShow">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="是否推荐商品" prop="isShow">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="是否上架商品" prop="isShow">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>

          <!-- <el-form-item> 
            <el-button v-show='title!="详情"' type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button v-show='title!="详情"' @click="resetForm('ruleForm')">重置</el-button>
            <el-button @click="closePage">取消</el-button>
          </el-form-item> -->
        </el-form>

      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import {reactive,} from 'vue'
import treeProduct from './treeProduct.vue'
import uploadImg  from './uploadImg.vue'
import WangEditor from './WangEditor.vue'
const  ruleForm = reactive({//表单数据
    id: '',
    title: '',
    num: '',
    price: '',
    sellPoint: '',
    image: [],
    descs: '',
    category: '',
    cid: '',
    isShow: true,
  })
  //接受tree数据---------------
const getTreeData = val => {
    console.log('val', val);
    ruleForm.cid = val.cid;
    ruleForm.category = val.name;
}
//接受upload图片上传数据
const sendImgUrl = (val) => {
  ruleForm.image.push(val)
}
//接受wangEditor数据
const sendWangEditor = (val) => {
    // console.log('val----',val);
    ruleForm.descs = val;
}
</script>
<style lang="scss" scoped>
.nav {
  height: 600px;
  background: #fff;
  .nav-title {
    background-color: #606266;
    padding: 20px;
    color: #fff;
  }
  .treeProduct {
    padding: 20px;
  }
}
.wrapper {
  background: #fff;
  .wrapper-title {
    background-color: #606266;
    padding: 20px;
    color: #fff;
    margin-bottom: 10px;
  }
  .demo-ruleForm {
    padding: 20px;
  }
}
</style>